<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
        事件指令：绑定事件，将js函数或代码绑定在标签事件上
        指令 v-on:事件名称="js函数或代码"
            绑定事件函数，必须是在vuejs框架中规定位置定义的函数

        简化
        v-on:事件名称="js函数或代码" ===> @事件名称="js函数或代码"

        注意：
        1.方法可以简化定义，但是不能使用箭头函数定义
        2.在指令中调用函数时，绑定函数时：
            1）函数无参，函数小括号可省略
            2）函数有参，函数小括号不能省略
        3.在方法中可以访问其他的data数据以及其他的方法
        在访问数据与方法时，需要使用this关键字调用
        原理：
            this是一个对象，在vuejs2中，this表示Vue对象
            而在Vue对象创建时，会将data和methods中数据和函数都挂载到它自己下面
        -->
        <p><button type="button" onclick="test()">原生事件绑定</button></p>
        <p><button type="button" v-on:click="fn1">按钮1</button></p>
        <p><button type="button" @click="fn2">按钮2</button></p>
    </div>
    <script src="./assets/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vuejs'
            },
            // 方法
            methods: {
                fn1: function() {
                    console.log('我的函数1111');
                },
                fn2(param) {
                    console.log('我的函数22222' + param);
                    console.log(this.message);
                    this.fn3();
                },
                fn3() {
                    console.log('我的函数333333');
                }
            }
        });

        function test() {
            console.log('test....');
        }
    </script>
</body>
</html>